<template>
  <div class="home-index">
    <!-- 添加一个触发频道管理的按钮 -->
    <div class="bar-btn" @click="eidtChannelShow">
      <van-icon name="wap-nav" size="16" />
    </div>
    <!-- 频道管理面板 -->
    <!-- 频道管理 -->
    <van-action-sheet
      class="home-sheet"
      :round="false"
      v-model="showChannelEdit"
      title="频道管理"
    >
      <channel-edit
        ref="channelEdit"
        @close="showChannelEdit = false"
        @updateCurChannel="hUpdateCurChannel"
        :activeIndex="active"
        @updateCurIndex="updateCurIndex"
        :channelList="channels"
      ></channel-edit>
    </van-action-sheet>
    <!-- 频道列表分类及内容展示 main -->
    <van-tabs v-model="active">
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <ArticleList :channel="item.id" @showMoreAction="showMoreAction" />
      </van-tab>
    </van-tabs>
    <!-- 不感兴趣更多操作 -->
    <van-popup class="more-pop" v-model="showMoreActionComponent">
      <!-- $('.refMoreAction')  相当于 this.$refs.refMoreAction-->
      <MoreAction ref="refMoreAction" @dislike="hDislike" @report="Hreport" />
    </van-popup>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { Tab, Tabs } from "vant";
import ArticleList from "./ArticleList";
import MoreAction from "./MoreAction";
import ChannelEdit from "./ChannelEdit";
import { dislikeArticle, reportArticle } from "@/api/article";
import { getChannels } from "@/api/channel";
export default {
  name: "lay-out",
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    ArticleList,
    MoreAction,
    ChannelEdit
  },
  data() {
    return {
      active: 0,
      channels: [],
      articleId: 0,
      showMoreActionComponent: false,
      showChannelEdit: false
    };
  },
  created() {
    //   因为我们不需要 dom 渲染之后在请求数据
    // 我们一开始在 vue 组件挂载成功之后就请求数据
    this.getChannel();
    // console.log(dayjs('2018-06-08').diff(dayjs('2017-06-01'),'day'),'时间差')
  },
  mounted() {},
  methods: {
    updateCurIndex(val) {
      this.active = val;
    },
    eidtChannelShow() {
      this.showChannelEdit = true;
      // 初始状态
      if (this.$refs && this.$refs.channelEdit) {
        this.$refs.channelEdit.isChange = false;
        this.$refs.channelEdit.editing = false;
      }
    },
    delArt() {
      // 获取频道id
      let channelsID = this.channels[this.active].id;
      //   文章 id
      let articleId = this.articleId;
      this.$bus.$emit("delArticle", {
        channelsID,
        articleId
      });
    },
    async getChannel() {
      try {
        const res = await getChannels();

        // console.log(res.data.data.channels);
        this.channels = res.data.data.channels;
      } catch (err) {
        console.log(err);
      }
    },
    showMoreAction(val) {
      //   父组件接受子组件的id
      // 收到点击事件
      this.articleId = val;
      this.showMoreActionComponent = true;
      if (this.$refs && this.$refs.refMoreAction) {
        this.$refs.refMoreAction.isReport = false;
      }
    },
    async hDislike() {
      console.log("我不喜欢这个文章", this.articleId);
      this.showMoreActionComponent = false;
      //   把id 传送给服务器
      await dislikeArticle(this.articleId);
      // 本地删除文章
      this.delArt();
    },
    async Hreport(val) {
      console.log("我不喜欢这个文章理由", val);
      this.showMoreActionComponent = false;
      // 请求一个接口
      await reportArticle(this.articleId, val);
      // 本地删除文章
      this.delArt();
    },
    hUpdateCurChannel(obj) {
      // 处理子组件中传过来的频道id
      const idx = this.channels.findIndex(item => item.id === obj.id);
      this.active = idx;
    }
  }
};
</script>

<style lang="less">
.home-index {
  padding-top: 46px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .van-tabs__wrap {
    position: fixed;
    top: 46px;
    left: 0px;
    right: 30px;
    z-index: 1;
  }
  .van-tabs--line {
    padding: 50px 0 50px 0;
  }
  .more-pop {
    width: 80%;
  }
  // 频道编辑按钮
  .bar-btn {
    position: fixed;
    right: 0px;
    top: 45px;
    width: 30px;
    height: 40px;
    display: flex;
    align-items: center;
    background-color: #fff;
    opacity: 0.8;
    z-index: 1;
    text-align: center;
    box-shadow: -5px 0px 2px rgba(0, 0, 0, 0.308);
    .van-icon-wap-nav {
      margin-left: 5px;
    }
  }
  // 频道管理-面板
  .home-sheet {
    .van-action-sheet__header {
      background: #1989fa;
      color: #fff;
    }
    .van-action-sheet__close {
      color: #fff;
    }
    height: 100%;
    max-height: 100%;
  }
}
</style>
